<template>
	<view class="app">
		<!-- 即将开课 -->
		<view class="jjkk">
			<view class="jjkk-a">
				<view class="jjkk-a-b">
					<view class="jjkk-a-b-a">
						<u-icon name="arrow-left" size="20px" color="#282636" @click="goback"></u-icon>
					</view>
					<view class="jjkk-a-b-b">
						<u-icon name="home-fill" size="20px" color="#282636" @click="goback"></u-icon>
					</view>
				</view>
			</view>
			<view class="jjkk-b">
				<text style="font-size: 20px; margin-right: 120px;">即将开课</text>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="lbt">
			<u-swiper :list="list3" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="5"
				bgColor="#ffffff" height="100%"></u-swiper>
		</view>
		<!-- 开课班级 -->
		<view class="kkbj">
			<!-- 标题 -->
			<view class="kkbj-a">
				<text style="font-size: 20px; font-weight: bold; color: #999999;">*2020年11月 即将开课班级</text>
			</view>
			<!-- 纵向排列 -->
			<view class="kkbj-b">
				<view class="kkbj-b-a">

				</view>
				<view class="kkbj-b-b">
					<view class="kkbj-b-b-a">
						<view class="kkbj-b-b-a-a">
							<text style="color: #999999; font-size: 16px;">11月1日 20:30开课</text>
						</view>
						<view class="kkbj-b-b-a-b" v-for="(item,index) in list2" :key="index">
							<view class="kkbj-b-b-a-b-a">
								<image :src="item.img" style="width: 100%; height: 100%;"></image>
							</view>
							<view class="kkbj-b-b-a-b-b">
								<view class="kkbj-b-b-a-b-b-a">
									<text style="font-size: 16px; font-weight: bold;">{{item.a}}</text>
								</view>
								<view class="kkbj-b-b-a-b-b-b">
									<text style="font-size: 12px; color: #999999;">{{item.b}}</text>
									<text style="font-size: 12px; color: #999999; margin-left: 10px;">{{item.c}}</text>
								</view>
								<view class="kkbj-b-b-a-b-b-c">
									<u-icon name="account" size="20px"></u-icon>
									<text style="font-size: 12px; color: #999999;">{{item.name}}</text>
									<text
										style="color: #FAA007; font-size: 20px; margin-left: 30px;">￥{{item.money}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list3: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				list2: [{
						img: '/static/u1965.png',
						a: '新媒体爆款写作指南',
						b: '新媒体',
						c: '基础入门',
						name: '钱自胜',
						money: '99,00'
					},
					{
						img: '/static/u1965.png',
						a: '新媒体爆款写作指南',
						b: '新媒体',
						c: '基础入门',
						name: '钱自胜',
						money: '99,00'
					},
					{
						img: '/static/u1965.png',
						a: '新媒体爆款写作指南',
						b: '新媒体',
						c: '基础入门',
						name: '钱自胜',
						money: '99,00'
					},
					{
						img: '/static/u1965.png',
						a: '新媒体爆款写作指南',
						b: '新媒体',
						c: '基础入门',
						name: '钱自胜',
						money: '99,00'
					}
				]
			}
		},
		methods: {
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.app {
		padding: 0;
		margin: 0;

		// 即将开课
		.jjkk {
			width: 100%;
			height: 10vh;
			display: flex;
			position: fixed;
			background-color: white;
			z-index: 5;

			.jjkk-a {
				width: 30%;
				height: 10vh;
				display: flex;
				justify-content: center;
				align-items: center;

				.jjkk-a-b {
					width: 65%;
					height: 35px;
					border: 1px solid #F2F2F2;
					border-radius: 30px;
					display: flex;

					.jjkk-a-b-a {
						width: 50%;
						height: 100%;
						border-right: 1px solid #E4E4E4;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.jjkk-a-b-b {
						width: 49%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}

			.jjkk-b {
				width: 70%;
				height: 10vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}


		// 轮播图
		.lbt {
			width: 100%;
			height: 25vh;
			background-color: #F8F8F8;
			position: absolute; // 修改为 absolute 定位
			top: 10vh; // 设置 top 属性，使其位于即将开课下面
			left: 0; // 确保左对齐
			z-index: 4; // 确保轮播图在即将开课下面
		}

		// 开课班级
		.kkbj {
			width: 100%;
			position: absolute;
			top: 40vh;
			z-index: 4;

			.kkbj-a {
				width: 90%;
				height: 10vh;
				background-color: #f0f0f0;
				border-radius: 0 30px 30px 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.kkbj-b {
				width: 100%;
				height: 60vh;
				display: flex;
				margin-top: 2vh;

				.kkbj-b-a {
					width: 15%;
					height: 60vh;
				}

				.kkbj-b-b {
					width: 85%;
					height: 60vh;

					.kkbj-b-b-a {
						width: 96%;
						height: 20vh;

						.kkbj-b-b-a-a {
							width: 100%;
							height: 5vh;
							display: flex;
							align-items: center;
						}

						.kkbj-b-b-a-b {
							width: 100%;
							height: 15vh;
							display: flex;
							margin-top: 15px;

							.kkbj-b-b-a-b-a {
								width: 50%;
								height: 15vh;
							}

							.kkbj-b-b-a-b-b {
								width: 50%;
								height: 15vh;

								.kkbj-b-b-a-b-b-a {
									width: 100%;
									height: 5vh;
									display: flex;
									align-items: center;
									margin-left: 10px;
								}

								.kkbj-b-b-a-b-b-b {
									width: 100%;
									height: 3vh;
									display: flex;
									align-items: center;
									margin-left: 10px;
								}

								.kkbj-b-b-a-b-b-c {
									width: 100%;
									height: 7vh;
									display: flex;
									align-items: center;
									margin-left: 10px;
								}
							}
						}
					}
				}
			}
		}

	}
</style>